<template>
    <el-card shadow='hover' style='width: 80px; padding: 0; margin: 0'>
        {{ Distance }} m
    </el-card>
</template>

<script>
export default {
    name: 'SeaLevelDistanceSimpl',
    data () {
        return {
            Distance : "",
        }
    },
    mounted () {
        setInterval(this.testData, 3000);	// 每三秒更新实时数据到折线图
        // setInterval(this.addData, 3000);	// 每三秒更新实时数据到折线图
    },
    methods: {
        // 添加实时数据
        testData : function() {
                this.Distance = (Math.random() * 100).toFixed(3);
        },
        // 添加实时数据
        addData : function() {
            this.$axios.get(this.GLOBAL.serverIp + '/api/seaLevelDistance/').then((res) => {
                //赋值到echartsOption中
                this.Distance = (res.data.LevelDistance * 1).toFixed(3);
            });
        },
    }
}
</script>

<style>
/*>>> .el-card__body {*/
/*    padding: 5px;*/
/*    border: 1px solid #C0911F;*/
/*}*/
/*>>> .el-card {*/
/*    padding: 5px;*/
/*    border: 1px solid #C0911F;*/
/*}*/

</style>
